<script>
	export default {
		props: {
			element: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		computed: {
			styleStr() {
				let styleStr = ''
				styleStr += `width:${this.box.w}px;height:${this.box.h}px;`
				styleStr += `left:${this.box.x}px;top:${this.box.y}px;`
				styleStr += `z-index: ${this.element.layer};`
				styleStr += this.element.style
				return styleStr;
			},
			box() {
				try {
					return JSON.parse(this.element.box)
				} catch (e) {
					return {
						w: 100,
						h: 100,
						x: 0,
						y: 0,
					}
				}
			}
		}
	}
</script>

<template>
	<image :alt="element.name" :src="element.content" class="element-image" :style="styleStr" />
</template>

<style scoped>
	.element-image {
		position: absolute;
		cursor: move;
	}
</style>